<template>
  <el-container>
    <component :is="currentPage" :row="row" :edit="edit" @toChangePage="changePage" />
  </el-container>
</template>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>

<script>
import list from './module/index'
import badges from './module/badges'
export default {
  components: {
    list,
    badges
  },
  data: function() {
    return {
      currentPage: 'list',
      row: {},
      edit: false
    }
  },
  created() {

  },
  methods: {
    changePage(page, data) {
      if (!page || page === 'list') {
        page = 'list'
      }
      if (page === 'add') {
        this.edit = false
        page = 'badges'
      } else if (page === 'edit') {
        this.edit = true
        this.row = data
        page = 'badges'
      }
      this.currentPage = page
    }
  }
}
</script>
